<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>旋转变形</title>
        
        <style>

            /* transform 变形
               将transform属性的值设置为rotate（），即可实现旋转变形
                            transform: rotate(45deg);
                                              旋转角度
                若角度为正，则顺时针方向旋转，否则逆时针方向旋转
            */
            .pic1 {
                transform: rotate(30deg);
            }
            .pic2 {
                transform: rotate(60deg);
            }
            .pic3 {
                transform: rotate(90deg);
            }
            .pic4 {
                transform: rotate(180deg);
            }
            .pic5 {
                transform: rotate(360deg);
            }

            /* 可以使用transform-origin属性设置自己的自定义变换变形原点 */
            .pic6 {
                /* 以左上角为中心点进行旋转 */
                transform-origin:0 0;
                transform: rotate(45deg);
            }
        </style>
    </head>
    <body>
        <p>
            <img src="gmsb.png" class="pic1">
        </p>
        <p>
            <img src="gmsb.png" class="pic2">
        </p>
        <p>
            <img src="gmsb.png" class="pic3">
        </p>
        <p>
            <img src="gmsb.png" class="pic4">
        </p>
        <p>
            <img src="gmsb.png" class="pic5">
        </p>
        <p>
            <img src="gmsb.png" class="pic6">
        </p>
    </body>
</html>